<template>
  <div>
  <!-- vue2.0 获取单个元素
  1、通过ref属性绑定该元素     <p ref="p">fhsg</p>
  2、通过this.$refs.p获取元素 -->
<!-- -- 获取v-for遍历的多个元素
1、通过ref属性绑定被遍历的元素 
<ul>
<li v-for="i in 4" :key="i" ref="li">{{i}}</li>

</ul>
2、通过this.$refs.li获取所有遍历的元素  -->
<p ref="p">hello</p>
<!-- 获取v-for遍历的多个元素 -->
<ul>
<li v-for="i in 5" :key="i" :ref="setDom">{{i}}</li>
</ul>
  </div>
</template>
<script>
import {computed,ref,onMounted} from 'vue'
export default {
  name:'App',
  setup(){
    // this.$refs.p.inn
    //获取单个dom元素
    //1、需要定义一个空的响应式数据
    const p=ref(null)
    //2.返回该数据，在想要获取的dom元素上使用ref属性绑定定义的数据
    onMounted(()=>{
      console.log(p.value.innerHTML);

    })
    // return {P}
    //获取v-for遍历的多个元素 
    //1.定义一个空的数组，接收所有的li
    const domlist=[];
    //2.定义一个函数，向空数组中push dom
    const setDom=(el)=>{
      domlist.push(el)
    }
       onMounted(()=>{
      console.log(domlist);

    })

    return {p,setDom}
  
      
    },

  }


   
</script>